{% extends 'base.html' %}

{% block link %}
    <style>
        .layui-table-cell {
            height: 50px;
            line-height: 50px;
        }

        .main {
            margin: -6px 0 0;
        }

        .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
            border-color: #0C0C0C;
        }


    </style>
{% endblock %}
{% block body %}
    <div class="main layui-bg-gray" style="text-align: center">
        <table class="layui-hide" id="sheet" lay-filter="sheet"></table>
    </div>

    <script type="text/html" id="toolbar">
        <div style="font-size: 18px;">{{ sheet_title }}</div>
    </script>


    <script type="text/html" id="showImg">
        <div onclick="show_img(this)"><img style="width: 50px; height: 50px" src="{{ '{{ d.image_url }}'|safe }}"/>
        </div>
    </script>

    <script type="text/html" id="dataFormat">
        <div>{{ "{{ layui.util.toDateString(d.shelf_date, 'yyyy-MM-dd') }}"|safe }}</div>
    </script>

    <script>

        layui.use(['table', 'layer'], function () {
            let table = layui.table,
                layer = layui.layer,
                $ = layui.$;

            $('img.img_g').click(function () {
                let img = this.find("img")
                console.log(img)
            })


            table.render({
                elem: '#sheet',
                data: {{ data|tojson }},
                toolbar: '#toolbar',
                height: 'full-60',
                title: '主属性',
                totalRow: false,
                limit: Number.MAX_VALUE,
                cols: [{{ cols|tojson }}],
                page: false,
                even: true,
                response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                },
                done: function (res, curr, count) {
                    $('th').css({'background-color': '#bdccea', 'color': 'black', 'font-weight': '500'})

                    $('.layui-table-total .layui-table tbody tr').css({'color': 'red', 'background-color': '#ffffb4'});

                }
            });
            window.show_img = function (t) {
                console.log(t)
                var t = $(t).find("img");
                //页面层
                layer.open({
                    type: 1,
                    title: ['图片'],
                    {#skin: 'layui-layer-rim', //加上边框#}
                    area: ['60%', '75%'], //宽高
                    shadeClose: true, //开启遮罩关闭
                    end: function (index, layero) {
                        return false;
                    },
                    content: '<div style="text-align:center"><img style="width: 60%;height:60%"  src="' + $(t).attr('src') + '" /></div>'
                });
            }
        });
    </script>
{% endblock %}